<template>
  <!-- 采购第一步 -->
  <div class="step1 mt-2">
    <div class="top">
      <div class="flexcc left">
        <div class="bold">
          <span>{{ t(`procurement.step1`) }}:</span>
          <span>{{ t(`procurement.${store.steplist[0].desc}`) }}</span>
        </div>
      </div>
      <div class="right"></div>
    </div>

    <div class="list mt-2">
      <div
        :class="['item']"
        v-for="(item, index) in listData"
        :key="index"
      >
        <div class="category flexcc">{{ item.projectName }}</div>
        <!-- <div class="desc mt-2">
          {{ item.projectIntroduction }}
        </div> -->
        <div class="con">
          <div class="pro">
            <div
              class="li"
              v-for="child in item.purchasingProjectWebVoList"
              :key="child.purchasingProjectId"
              @click="itemClick(item, child)"
            >
              <div class="name flexcc">
                {{ child.projectName }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onBeforeMount, ref, unref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import useProcurement from '@/stores/procurement.js'
import useLogin from '@/stores/login'
import { getPurchasingInfoApi, relationBoatApi, detailApi } from '@/service/procurement'

const { t, locale } = useI18n()
const router = useRouter()
const route = useRoute()

const shippingId = route.query.shippingId
const projectLargeId = route.query.projectLargeId
const type = ref(route.query.type)

onBeforeMount(() => {
  init()
})
watch(locale, (n) => {
  init()
})

const store = useProcurement()
const { next, setActiveStep, setCategoryList, setCategory, setSecondLevel, setOrderInfo, setOrderInfoKey } = store

const storeLogin = useLogin()

// 类别
const listData = computed(() => {
  return store.categoryList
})
const getList = async () => {
  await getPurchasingInfoApi().then(({ data }) => {
    setCategoryList(data)
  })
}

// 选择类别
const itemClick = (item, child) => {
  setCategory(item)
  setSecondLevel(child)

  let params = {
    projectLargeId: store.category.purchasingProjectId // 大类id
  }

  // 船舶id
  if (shippingId) {
    params.shippingId = shippingId
  }

  // 伙食
  if (['伙食', 'FOODS'].includes(child.projectName)) {
    // 船长
    if (storeLogin.userInfo.roleCode !== 'captain') {
      ElMessage.warning(t('procurement.category4ErrMsg'))
      return
    }
  }

  var newParams = {
    ...params,
    projectFirstId: child.purchasingProjectId
  }
  relationBoatApi(newParams).then(({ data }) => {
    setOrderInfoKey('id', data)
    next()
  })
}

// 回显
const getDetail = () => {
  detailApi(store.orderInfo.id).then(({ data }) => {
    setOrderInfo(data)
  })
}

// 从采购单列表 进入时
const fromList = () => {
  const id = route.query.id
  if (!id) return
  setOrderInfoKey('id', Number(id))

  const item = store.categoryList.find((c) => c.purchasingProjectId === Number(projectLargeId))
  if (!item) return
  setCategory(item)

  // 编辑
  if (type.value === 'edit') {
    setActiveStep(1)
  }
  if (type.value === 'inquiry') {
    getDetail()
    setActiveStep(2)
  }
}

//
const init = async () => {
  await getList()
  fromList()
}
</script>

<style scoped lang="scss">
.step1 {
  padding-bottom: 36px;
  .el-button {
    min-width: 150px;
  }
  .top {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0px;
    justify-content: space-between;
  }

  .list {
    display: grid;
    grid-template-columns: repeat(2, 620px);
    gap: 30px;
    > .item {
      // background: #aaa;
      // padding: 0 50px;
      // cursor: pointer;
      transition: 0.3s;
      background: #fff;
      .category {
        font-size: 30px;
        font-weight: bold;
        text-transform: uppercase;
        // color: #fff;
        padding: 40px 0;
        border: 1px solid #ca2a02;
        border-bottom: 4px solid #ca2a02;
        border-radius: 8px 8px 0px 0px;
      }

      .con {
        height: calc(100% - 125px);
        border: 1px solid #2f5895;
        border-top: 0;
      }

      .pro {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        color: #007ad1;
        // gap: 40px;
        // row-gap: 20px;
        .li {
          padding: 10px 17px;
          font-size: 20px;
          border: 1px solid #bbd4e8;
          border-top: 0;
          border-left: 0;
          cursor: pointer;
          .name {
            height: 80px;
            background: #7abbeb;
            border-radius: 4px;
            &:hover{
              opacity: 0.8;
            }
          }
        }
      }

      // &:nth-of-type(1) {
      //   background: url('@/assets/img/pic_shebei.png') no-repeat center / cover;
      // }
      // &:nth-of-type(2) {
      //   background: url('@/assets/img/pic_beijian.png') no-repeat center / cover;
      // }
      // &:nth-of-type(3) {
      //   background: url('@/assets/img/pic_youheshui.png') no-repeat center / cover;
      // }
      // &:nth-of-type(4) {
      //   background: url('@/assets/img/pic_huoshi.png') no-repeat center / cover;
      // }
    }
  }
}
</style>
